<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn :number1="num1" :number2="num2"
       @num2change="num2change"
       @num1change="num1change"></cpn>
</div>

<template id="tcpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>子组件data:{{dnumber1}}</h2>
    <input type="text" :value="dnumber1" @input="num1Input" >
    <h2>props:{{number2}}</h2>
    <h2>子组件data:{{dnumber2}}</h2>
    <input type="text" :value="dnumber2" @input="num2Input" >
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      num1:1,
      num2:0
    },
    methods:{
      num2change(value){
        // 传过来的值是一个字符串，要转换成number类型
        this.num2= parseInt(value);
        this.num1=value/100;
      },
      num1change(value){
        this.num1= parseInt(value);
        this.num2=value*100
      }
    },
    components:{
      cpn:{
        template:'#tcpn',
        props:{
          number1:Number,
          number2:Number
        },
        data(){
          return{
            dnumber1:this.number1,
            dnumber2:this.number2
          }
        },
        methods:{
          num1Input(event){
            // 1.将input中的value赋值到dnumber1中
            this.dnumber1=event.target.value;
            // 2.为了让父组件可以修改值，发射一个事件
            this.$emit('num1change',this.dnumber1);
          //  3.同时修改dnumber2中的值为dnumber1的100倍
            this.dnumber2=this.dnumber1*100;
          },
          num2Input(event){
            this.dnumber2=event.target.value;
            this.$emit('num2change',this.dnumber2);
          //  3.同时修改dnumber1的值为dnumber1的100分之一
            this.dnumber1=this.dnumber2/100;
          }
        }
      }
    }
  })

</script>
</body>
</html>